<template>
  <div class="flow_region">
    <div class="nodes-wrap">
      <div
        v-for="item in nodeTypeList"
        :key="item.id"
        class="node"
        draggable="true"
        @dragstart="drag($event, item)"
      >
        <!-- <div class="log">
          <img :src="item.logImg" alt="">
        </div>  -->
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    <div
      id="flowWrap"
      ref="flowWrap"
      class="flow-wrap"
      @drop="drop($event)"
      @dragover="allowDrop($event)"
    >
      <div id="flow">
        <div
          v-show="auxiliaryLine.isShowXLine"
          class="auxiliary-line-x"
          :style="{
            width: auxiliaryLinePos.width,
            top: auxiliaryLinePos.y + 'px',
            left: auxiliaryLinePos.offsetX + 'px',
          }"
        ></div>
        <div
          v-show="auxiliaryLine.isShowYLine"
          class="auxiliary-line-y"
          :style="{
            height: auxiliaryLinePos.height,
            left: auxiliaryLinePos.x + 'px',
            top: auxiliaryLinePos.offsetY + 'px',
          }"
        ></div>
        <flowNode
          v-for="item in data.nodeList"
          :id="item.id"
          :key="item.id"
          :node="item"
          @setNodeName="setNodeName"
          @deleteNode="deleteNode"
          @changeLineState="changeLineState"
        ></flowNode>
      </div>
    </div>
  </div>
</template>

<script>
import { jsPlumb } from "jsplumb";
import methods from "./config/methods";
import Data from "./../../api/data.json";
import Line from "./../../api/line.json";
import Nav from "./../../api/nav.json";
import flowNode from "./config/node-item";
export default {
  name: "FlowEdit",
  components: {
    flowNode,
  },
  data() {
    return {
      jsPlumb: null,
      currentItem: null,
      nodeTypeList: Nav.data,
      nodeTypeObj: {},
      data: {
        nodeList: [],
        lineList: [],
      },
      selectedList: [],

      jsplumbSourceOptions: {
        filter: ".node-anchor", //触发连线的区域
        /*"span"表示标签，".className"表示类，"#id"表示元素id*/
        filterExclude: false,
        anchor: "AutoDefault",
        allowLoopback: false,
        detachable: false,
        reattach: true,
      },
      jsplumbTargetOptions: {
        filter: ".node-anchor",
        /*"span"表示标签，".className"表示类，"#id"表示元素id*/
        filterExclude: false,
        anchor: "AutoDefault",
        detachable: false,
        allowLoopback: false,
        reattach: true,
      },
      auxiliaryLine: { isShowXLine: false, isShowYLine: false }, //对齐辅助线是否显示
      auxiliaryLinePos: {
        width: "100%",
        height: "100%",
        offsetX: 0,
        offsetY: 0,
        x: 20,
        y: 20,
      },
      commonGrid: [5, 5], //节点移动最小距离
      selectModuleFlag: false, //多选标识
      rectAngle: {
        px: "", //多选框绘制时的起始点横坐标
        py: "", //多选框绘制时的起始点纵坐标
        left: 0,
        top: 0,
        height: 0,
        width: 0,
      },
      labelName: "",
      jsplumbSetting: {
        grid: [10, 10],
        // 动态锚点、位置自适应
        Anchors: ["TopCenter", "RightMiddle", "BottomCenter", "LeftMiddle"],
        Container: "flow",
        // 连线的样式 StateMachine、Flowchart,有四种默认类型：Bezier（贝塞尔曲线），Straight（直线），Flowchart（流程图），State machine（状态机）
        Connector: [
          "Flowchart",
          { cornerRadius: 90, alwaysRespectStubs: false, stub: 5 },
        ],
        ConnectionOverlays: [
          [
            "Label",
            {
              label: "",
              cssClass: "aLabel",
              location: 0.5,
            },
          ],
        ],
        // 鼠标不能拖动删除线
        ConnectionsDetachable: false,
        // 删除线的时候节点不删除
        DeleteEndpointsOnDetach: false,
        // 连线的端点
        // Endpoint: ["Dot", {radius: 5}],
        Endpoint: [
          "Rectangle",
          {
            height: 10,
            width: 10,
          },
        ],
        maxConnections: 1,
        // 线端点的样式
        EndpointStyle: {
          fill: "rgba(255,255,255,0)",
          outlineWidth: 1,
        },
        LogEnabled: false, //是否打开jsPlumb的内部日志记录
        // 绘制线
        PaintStyle: {
          stroke: "#409eff",
          strokeWidth: 2,
        },
        HoverPaintStyle: { stroke: "#ff00cc", strokeWidth: 2 },

        // 绘制箭头
        Overlays: [
          [
            "Arrow",
            {
              width: 8,
              length: 8,
              location: 1,
            },
          ],
        ],
        RenderMode: "svg",
      },
    };
  },
  mounted() {
    console.log(this.$el)
    this.jsPlumb = jsPlumb.getInstance();
    this.initNode();
    this.jsPlumb.setZoom(0.4)
    this.fixNodesPosition();
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    ...methods,
    initNode() {
      this.data.lineList = Line.data.items;
      this.data.nodeList = Data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.flow_region {
  display: flex;
  width: 90%;
  height: 90%;
  margin: 20px auto;
  border: 1px solid #ccc;
  .nodes-wrap {
    width: 150px;
    height: 100%;
    border-right: 1px solid #ccc;
    .node {
      display: flex;
      height: 40px;
      width: 80%;
      margin: 5px auto;
      border: 1px solid #ccc;
      line-height: 40px;
      text-align: center;
      &:hover {
        cursor: grab;
      }
      &:active {
        cursor: grabbing;
      }
      .log {
        width: 40px;
        height: 40px;
      }
      .name {
        width: 0;
        flex-grow: 1;
      }
    }
  }
  /deep/ .aLabel {
    padding: 4px 8px;
    border: 1px solid #c4c6cc;
    color: #979ba5;
    background-color: #fff;
    border-radius: 15px;
    text-align: center;
    z-index: 100;
  }
  .flow-wrap {
    height: 100%;
    position: relative;
    overflow: hidden;
    outline: none !important;
    flex-grow: 1;
    // background-image: url('../assets/point.png');
    #flow {
      position: relative;
      width: 100%;
      height: 100%;
      .auxiliary-line-x {
        position: absolute;
        border: 0.5px dashed #2ab1e8;
        z-index: 9999;
      }
      .auxiliary-line-y {
        position: absolute;
        border: 0.5px dashed #2ab1e8;
        z-index: 9999;
      }
    }
  }
}
</style>

<style lang="scss">
.jtk-connector.active {
  z-index: 9999;
  path {
    stroke: #150042;
    stroke-width: 1.5;
    animation: ring;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    stroke-dasharray: 5;
  }
}
@keyframes ring {
  from {
    stroke-dashoffset: 50;
  }
  to {
    stroke-dashoffset: 0;
  }
}
</style>
